﻿@model DAMS.Web.Areas.Manage.Models.CategoryCreateViewModel
@{
    ViewData["Title"] = "分类管理";
}

@section Stylesheets {
    <link href="~/lib/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />

}
<div>
    <a asp-action="Create" class="btn btn-sm btn-success m-2">创建分类</a>
</div>
<div id="catetoryTree" class="ztree" style=" background-color:#fff; border:1px solid #c2c2c2;overflow-y:scroll; overflow-x:auto;"
     data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?"></div>
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script src="~/lib/zTree/js/jquery.ztree.all.js"></script>
    <script src="~/lib/layer/layer.js"></script>
    <script>
        function eachJson(node) {
            switch (node.type) {
                case 1:
                    node.icon = "/lib/zTree/css/zTreeStyle/img/diy/11.png";
                    node.name = "顶层分类";
                    break;
                case 2:
                    node.icon = "/lib/zTree/css/zTreeStyle/img/diy/1_open.png";
                    break;
                case 4:
                    node.icon = "/lib/zTree/css/zTreeStyle/img/diy/10.png";
                    break;
                case 8:
                    node.icon = "/lib/zTree/css/zTreeStyle/img/diy/2.png";
                    break;
                case 16:
                    node.icon = "/lib/zTree/css/zTreeStyle/img/diy/12.png";
                    break;
            }
            if (node.children != null) {
                for (var i = 0; i < node.children.length; i++) {
                    eachJson(node.children[i]);
                }
            }
        }
        function dropMove(treeId, nodes, targetNode) {
            if (nodes[0].pid != targetNode.pid)
                return false;
            return true;
        }
        $(document).ready(function () {
            var json =@Html.Raw(Model.TreeJson);
            eachJson(json);
            var templates=@Html.Raw(Model.TemplatesJson);
            zTreeObj = $.fn.zTree.init($("#catetoryTree"), {
                callback: {
                    beforeClick: function (treeId, treeNode, clickFlag) {
                        layer.open({//点击查看分类详情，layer弹窗组件打开弹窗显示详情页
                            type: 2,
                            area: ['50%', '650px'],
                            shadeClose: true,
                            resize: false,
                            title: '分类详情  ' + treeNode.name,
                            content: ['/Manage/Category/Details/' + treeNode.id]
                        }); 
                        return true;
                    },
                    beforeRemove: function (treeId, treeNode) {//删除分类
                        if (confirm("确定要删除 " + treeNode.name + " 吗?")) {
                            window.location.href = "/Manage/Category/Delete?id=" + treeNode.id;
                        }
                        else {
                            return false;
                        }
                    },
                    beforeEditName: function (treeId, treeNode) {//进入编辑页面
                        window.location.href = "/Manage/Category/Edit?id=" + treeNode.id;
                        return false;
                    },
                    beforeDrop: function (treeId, treeNodes, targetNode, moveType) {
                        //调整分类位置
                        if (confirm("此操作将改变分类的排序位置，确定吗？")) {
                            window.location.href = "/Manage/Category/Move?id=" + treeNodes[0].id + "&newid=" + targetNode.id;
                        }
                        return false;
                    }
                },
                view: {
                    autoCancelSelected: false,
                    selectedMulti: false,
                },
                edit: {
                    drag: {
                        autoExpandTrigger: true,
                        prev: dropMove,
                        inner: false,
                        next: dropMove
                    },
                    enable: true,
                    showRemoveBtn: function (treeId, treeNode) {//显示删除按钮，但ID为1和2的分类不显示，这里个ID对应顶级分类和首页，这两个默认不能删除
                        if (treeNode.id == 1 || treeNode.id == 2)
                            return false;
                        else
                            return true;
                    },
                    showRenameBtn: function (treeId, treeNode) {//显示编辑按钮，顶级分类不能编辑ID为1
                        if (treeNode.id == 1)
                            return false;
                        else
                            return true;
                    },
                    removeTitle: "删除",
                    renameTitle:"编辑"
                }
            }, json);
            zTreeObj.expandAll(true);//展开
        })
    </script>
}